<template>
  <div class="login-container">



    <el-card class="login-card">
      <h2 class="login-title">欢迎登录</h2>
      <el-form :model="loginForm" label-position="top" class="login-form">
        <el-form-item prop="username">
          <el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" v-model="loginForm.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onclickLogin" size="large" class="submit-class" >登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<!--<script>-->
<!--export default {-->
<!--  data() {-->
<!--    return {-->

<!--      loginRules: {-->
<!--        username: [-->
<!--          { required: true, message: '请输入用户名', trigger: 'blur' }-->
<!--        ],-->
<!--        password: [-->
<!--          { required: true, message: '请输入密码', trigger: 'blur' }-->
<!--        ]-->
<!--      }-->
<!--    };-->
<!--  },-->
<!--  methods: {-->
<!--    handleSubmit() {-->
<!--      this.$refs.loginForm.validate(valid => {-->
<!--        if (valid) {-->
<!--          // 登录逻辑处理-->
<!--          console.log('登录成功');-->
<!--          this.$router.push('/home');-->

<!--        } else {-->
<!--          console.log('表单验证失败');-->
<!--          return false;-->
<!--        }-->
<!--      });-->
<!--    }-->
<!--  }-->
<!--};-->
<!--</script>-->

<script setup>
import { useRouter } from "vue-router";
import {ref, reactive, getCurrentInstance, onMounted} from 'vue'
import API from "@/utils/axiosInstance.js"

import md5 from "js-md5"
import {ElMessage} from "element-plus";

const { proxy } = getCurrentInstance();
proxy.$md5=md5

const router = useRouter();


let loginForm = reactive({
  username: '',
  password: ''
})
const onclickLogin = () =>{
  let params = {};
  params["@LGNNAME"] = loginForm.username;
  params["@PASSWORD"] = proxy.$md5(loginForm.password);  //
  params["M_PRO_NAME"] = "PROC_APP_LOGIN";
  API.post('/call',params).then((res)=>{
    const data  = res.data;
    if(data.code==="200" && data.data.DATASET.length>0){
      ElMessage({
        showClose: true,
        message: '登录成功！',
        type: 'success',
      })
      router.push({
        path: "/home"
      });
    }else {
      ElMessage({
        showClose: true,
        message: '用户名密码错误，请检查！',
        type: 'error',
      })
    }
    localStorage.setItem('USER',JSON.stringify( loginForm));
    localStorage.setItem('USERINFO',JSON.stringify( data.data.DATASET[0]));
  })
}

onMounted(()=>{
  const user = localStorage.getItem("USER");
  Object.assign(loginForm, JSON.parse(user))
})

</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  //background-image: url("public/images/login.jpg");
  margin:0px;
  background: url("public/images/login.jpg") no-repeat;
  background-size:100% 100%;
  background-attachment:fixed;
}

.login-card {
  width: 400px;
  padding: 40px;
  //border-radius: 4px;
  //box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  background: transparent;
}

.login-title {
  text-align: center;
  margin-bottom: 20px;
  font-size: 28px;
  font-weight: bold;
}

.login-form {
  width: 100%;
}
</style>

<style scoped lang="scss">
.login-container {
  display: flex;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: #293246;

  .login-left {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 50vw;
    height: 100%;
    background-image: url(public/images/login-bg-dark.svg);
    background-repeat: no-repeat;
    background-position: 100%;
    background-size: auto 100%;

    &-wrap {
      height: 80vh;
      margin: auto;

      .img {
        width: 280px;
        margin-top: 10vh;
      }

      .title,
      .desc {
        max-width: 500px;
        font-weight: bold;
        color: #fff;
        letter-spacing: 1.2px;
      }

      .desc {
        font-size: 28px;
      }

      .tip {
        color: #fff;
      }
    }
  }
  .submit-class{
    width: 300%;
  }
}

</style>
